import styled, { createGlobalStyle, keyframes } from "styled-components";

// 通过 attrs 来给组件添加属性，比如 defaultValue，然后通过 props 来获取属性值。
interface DivComponentProps {
  defaultValue?: string;
}

const DivComponent = styled.input.attrs<DivComponentProps>((props) => ({
  defaultValue: props.defaultValue || "请输入内容",
  type: "text",
}))`
  border: 1px solid blue;
`;

// 动画

const move = keyframes`
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(100px);
  }
`;
const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: red;
  animation: ${move} 1s linear infinite;
`;

// 全局样式,直接影响全局的
const GlobalStyle = createGlobalStyle`
  body {
    background-color: #f0f0f0;
  },
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  ul,ol{
      list-style: none;
  }
`;

export default function InputDemo() {
  const defaultValue = "这雨说下就下";
  return (
    <div>
      <DivComponent defaultValue={defaultValue} />
      <Box></Box>
      <GlobalStyle></GlobalStyle>
    </div>
  );
}
